<template>
  <div class="income">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-row type="flex" align="middle" justify="space-between" class="income-money">
      <el-row type="flex" align="middle">
        <div class="balance-title label">当前开通状态</div>
        <template v-if="$util.isDef(vipState)">
          <div class="open" v-if="vipState == 0">
            <span class="time">未开通</span>
          </div>
          <div class="time" v-else-if="vipState == 1">
            {{ expireTime | formatExpireTime('{y}.{m}.{d}') }}到期
          </div>
          <div class="open" v-else-if="vipState == 2">
            <span class="time">已过期</span>
          </div>
        </template>
      </el-row>
      <!-- <el-input placeholder="会员卡兑换码" size="mini" v-model="exchangeVal" class="input">
        <template slot="append">
          <el-button size="mini" @click="handleExchange">兑换</el-button>
        </template>
      </el-input> -->
    </el-row>
    <el-row type="flex" class="balance-recharge">
      <div class="balance-title">会员续费</div>
      <el-radio-group v-model="vipChoiceVal" @change="changeRecharge">
        <el-row type="flex" class="recharge">
          <el-radio
            class="item"
            :label="item.id"
            border
            v-for="(item, index) in vipList"
            :key="index"
          >
            <div class="title">{{ item.title }}</div>
            <el-row type="flex" align="bottom">
              <span class="price"><span class="tor">￥</span>{{ item.price }}</span>
              <span class="scribing_price">{{ item.scribing_price }}</span>
            </el-row>
            <el-row type="flex">
              <div class="give" v-if="item.give_credit != 0 || item.give_days != 0">
                <template v-if="item.give_credit != 0">赠送{{ item.give_credit }}积分</template>
                <template v-if="item.give_days != 0">赠送{{ item.give_days }}天</template>
              </div>
            </el-row>
          </el-radio>
        </el-row>
      </el-radio-group>
    </el-row>
    <el-row type="flex" align="middle" justify="end" class="balance-deal">
      <el-row type="flex" align="middle" class="money">
        <div class="text">应付金额：</div>
        <div class="num">¥{{ total }}</div>
      </el-row>
    </el-row>
    <el-row type="flex" align="middle" justify="end">
      <el-button type="primary" @click="handleBuy" :loading="disabledButton">去支付</el-button>
    </el-row>
  </div>
</template>

<script>
import projectSetting from '@/settings/projectSetting.js'
import MyTabs from '../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_vip',
          title: '我的会员'
        },
        {
          path: '/my/finance/my_vip_flow',
          title: '充值记录'
        }
      ],
      exchangeVal: '',
      expireTime: 0,
      vipList: [],
      vipChoiceVal: '',
      total: 0,
      vipState: null,
      disabledButton: false,
      routePath: this.$route.path
    }
  },
  mounted() {
    this.handleVipInfo()
  },
  methods: {
    // 获取收入信息
    handleVipInfo() {
      this.$api.getVip(res => {
        this.vipList = res.data.vip
        this.expireTime = res.data.expire_time
        this.vipChoiceVal = res.data.vip[0].id
        this.vipState = res.data.vip_status
        this.changeRecharge()
      })
    },
    // 续费
    changeRecharge() {
      this.vipList.forEach(item => {
        if (item.id == this.vipChoiceVal) {
          this.total = item.price
        }
      })
    },
    // 购买
    handleBuy() {
      this.disabledButton = true
      this.$api.createVip(
        {
          from: projectSetting.globDeviceType,
          vip_id: this.vipChoiceVal
        },
        res => {
          this.$store.commit('order/SET_ORDER_DATA', {
            order_no: res.data.order_no,
            payment: res.data.payment,
            return_url: this.$route.path
          })
          this.disabledButton = false
          this.$router.push({
            path: '/buy/confirm'
          })
        }
      )
    },
    // 兑换
    handleExchange() {
      this.$messageBox.success('兑换成功,会员有效期至：2020-12-32')
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.income {
  .income-money {
    .label::before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
    .time {
      font-size: 13px;
      color: $text-color-auxiliary;
    }
    .input {
      width: 200px;
      ::v-deep .el-input-group__append {
        color: #fff;
        padding: 0 15px;
        border-color: #e6a751;
        background-color: #e6a751;
      }
    }
  }
  .balance-title {
    width: 100px;
    font-size: 14px;
    text-align: right;
    margin-right: 18px;
    color: $text-color-import;
  }
  .balance-recharge {
    margin-top: 25px;
    .recharge {
      flex-wrap: wrap;
      .item:nth-child(4n) {
        margin-right: 0;
      }
      .item {
        margin-right: 28px;
        margin-bottom: 10px;
        &.el-radio {
          margin-right: 28px;
        }
        &.el-radio.is-bordered {
          + .el-radio.is-bordered {
            margin-left: 0;
          }
          &.is-checked {
            border-color: transparent;
          }
          width: 160px;
          height: 108px;
          padding: 0;
          position: relative;
          border-radius: 0;
          ::v-deep .el-radio__input {
            position: absolute;
            opacity: 0;
            top: 0;
          }
          ::v-deep .el-radio__label {
            position: absolute;
            left: -1px;
            top: -1px;
            height: 108px;
            width: 160px;
            padding-left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          background-image: url('../../../assets/images/public/vip_pre.png');
        }
        .title {
          color: #582f1d;
          font-size: 14px;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .price {
          color: #582f1d;
          font-size: 24px;
          font-weight: bold;
          margin-right: 5px;
          .tor {
            font-size: 14px;
            font-weight: bold;
          }
        }
        .scribing_price {
          color: #a89377;
          font-size: 12px;
          line-height: 18px;
          text-decoration: line-through;
        }
        .give {
          margin-top: 10px;
          color: #c18469;
          font-size: 12px;
          padding: 4px 9px;
          border-radius: 11px;
          border: 1px solid rgba(193, 132, 105, 1);
        }
      }
      .input {
        width: 224px;
        margin-right: 20px;
        ::v-deep .el-input__inner {
          height: 50px;
          line-height: 50px;
          border-radius: 0;
        }
        ::v-deep .el-input__prefix {
          font-size: 18px;
          color: $text-color-secondary;
        }
      }
    }
    .msg {
      color: #b7bac1;
      font-size: 12px;
      margin-top: 8px;
    }
  }
  .balance-deal {
    margin-top: 40px;
    margin-bottom: 20px;
    .money {
      .text {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
      }
      .num {
        font-size: 20px;
        color: $text-color-price;
      }
    }
  }
}
</style>
